<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
    <style>
        html,body,div,ul,li,a,h1,h2,h3,h4,h5,h6{
            padding: 0;
            margin:0;
            position: relative;
        }
        .menu{
            width: 14%;
            float: left;
        }
        .menu ul{
            min-height: 927px;
            height: 100%;
            background: #333333;
        }
        .menu ul li{
            width: 100%;
            height: 50px;
            line-height: 50px;
            margin-top: 5px;
            text-align: left;
            background: black;
            text-indent: 20px;
            cursor: pointer;
        }
        .menu ul li a{
            text-decoration: none;
            font-size: 20px;
            color: #ffffff;
            display: block;
            width: 100%;
            height: 50px;
        }
        .menu ul li a:hover{
            color: #000;
            background: rebeccapurple;
        }
        iframe{
            position: absolute;
            right: 0px;
            width:85%;
            min-height: 927px;
            height:100%;
        }

        .a_mode{
            color: red!important;
            font-weight: bold;
        }

        .u_cls{
            display: none;
            min-height: 30px!important;
        }
        .u_cls li a{
            text-indent: 40px;
        }

        .main_page{
            color: #eccc68!important;
            font-size: 25px!important;
        }


    </style>


</head>
<body>
    <div>
        <!--左边菜单-->
        <div class="menu">
            <ul type="none">
                <li><a href="html/main.html" target="min_show" class="main_page">主页</a></li>
                <li class="mode"><a href="#html" class="a_mode">HTML模块</a></li>
                <ul class="u_cls">
                    <li><a href="html/font标签.html" target="min_show">font标签</a></li>
                    <li><a href="html/img标签.html" target="min_show">img标签</a></li>
                    <li><a href="html/列表.html" target="min_show">列表.html</a></li>
                    <li><a href="html/标签语法.html" target="min_show">标签语法</a></li>
                    <li><a href="html/表格标签.html" target="min_show">表格标签</a></li>
                    <li><a href="html/特殊字符.html" target="min_show">特殊字符</a></li>
                    <li><a href="html/表格跨行跨列.html" target="min_show">表格跨行跨列</a></li>
                    <li><a href="html/超链接.html" target="min_show">超链接</a></li>
                    <li><a href="html/表单.html" target="min_show">表单</a></li>
                    <li><a href="html/表单提交细节.html" target="min_show">表单提交细节</a></li>
                    <li><a href="html/other.html" target="min_show">其他标签</a></li>
                </ul>

                <li class="mode"><a href="#css" class="a_mode">CSS模块</a></li>
                <ul class="u_cls">
                    <li><a href="css/1-css.html" target="min_show">内联样式</a></li>
                    <li><a href="css/2-css.html" target="min_show">style内嵌样式</a></li>
                    <li><a href="css/3-css.html" target="min_show">外链css样式</a></li>
                    <li><a href="css/标签名选择器.html" target="min_show">标签名选择器</a></li>
                    <li><a href="css/ID选择器.html" target="min_show">ID选择器</a></li>
                    <li><a href="css/class选择器.html" target="min_show">class选择器</a></li>
                    <li><a href="css/组合选择器.html" target="min_show">组合选择器</a></li>
                    <li><a href="css/常用样式.html" target="min_show">常用样式</a></li>
                </ul>

                <li class="mode"><a href="#js" class="a_mode">JS模块</a></li>
                <ul class="u_cls">
                    <li><a href="javascript/01-hello.html" target="min_show">第一个javascript</a></li>
                    <li><a href="javascript/02-hello.html" target="min_show">外部引用js</a></li>
                    <li><a href="javascript/变量.html" target="min_show">变量</a></li>
                    <li><a href="javascript/关系运算符.html" target="min_show">关系运算符</a></li>
                    <li><a href="javascript/逻辑运算符.html" target="min_show">逻辑运算符</a></li>
                    <li><a href="javascript/数组.html" target="min_show">数组</a></li>
                    <li><a href="javascript/函数1.html" target="min_show">函数</a></li>
                    <li><a href="javascript/隐形参数.html" target="min_show">隐形参数</a></li>
                    <li><a href="javascript/自定义对象.html" target="min_show">自定义对象</a></li>
                    <li><a href="javascript/花括号定义对象.html" target="min_show">花括号定义对象</a></li>
                </ul>

                <li class="mode"><a href="#jssj" class="a_mode">JS事件</a></li>
                <ul class="u_cls">
                     <li><a href="event/onload.html" target="min_show">onload</a></li>
                     <li><a href="event/onclick.html" target="min_show">onclick</a></li>
                     <li><a href="event/onblur.html" target="min_show">onblur</a></li>
                     <li><a href="event/onchange.html" target="min_show">onchange</a></li>
                    <li><a href="event/onsubmit.html" target="min_show">onsubmit</a></li>
                </ul>

                <li class="mode"><a href="#jsdom" class="a_mode">DOM模型</a></li>
                <ul class="u_cls">
                    <li><a href="dom/getElementById.html" target="min_show">getElementById</a></li>
                    <li><a href="dom/getElementsByName.html" target="min_show">getElementsByName</a></li>
                    <li><a href="dom/getElementsByTagName.html" target="min_show">getElementsByTagName</a></li>
                    <li><a href="dom/DOM查询练习.html" target="min_show">DOM查询练习</a></li>
                    <li><a href="dom/createElement.html" target="min_show">createElement</a></li>
                    <li><a href="dom/regexp.html" target="min_show">regexp</a></li>
                </ul>

                <li class="mode"><a href="#jquery" class="a_mode">jquery</a></li>
                <ul class="u_cls">
                    <li><a href="jquery/jqueryexercise.html" target="min_show">jquery练习1</a></li>
                    <li><a href="jquery/minfun.html" target="min_show">核心函数</a></li>
                    <li><a href="jquery/基本选择器.html" target="min_show">基本选择器</a></li>
                    <li><a href="jquery/层次选择器.html" target="min_show">层次选择器</a></li>
                    <li><a href="jquery/基本的过滤选择器.html" target="min_show">基本的过滤选择器</a></li>
                    <li><a href="jquery/内容过滤选择器.html" target="min_show">内容过滤选择器</a></li>
                    <li><a href="jquery/可见性过滤选择器.html" target="min_show">可见性过滤选择器</a></li>
                    <li><a href="jquery/属性过滤选择器.html" target="min_show">属性过滤选择器</a></li>
                    <li><a href="jquery/表单对象属性过滤选择器.html" target="min_show">表单对象属性过滤选择器</a></li>
                    <li><a href="jquery/元素筛选方法.html" target="min_show">元素筛选方法</a></li>
                    <li><a href="jquery/jqueryTest.html" target="min_show">jquery测试</a></li>
                </ul>
                <li class="mode"><a href="#jquery" class="a_mode">jquery练习</a></li>
                <ul class="u_cls">
                    <li><a href="jquery/quanxuan.html" target="min_show">全选/全不选</a></li>
                    <li><a href="jquery/domdml.html" target="min_show">DOM增删改</a></li>
                    <li><a href="jquery/jquery练习2.html" target="min_show">jquery练习2</a></li>
                    <li><a href="jquery/动态table.html" target="min_show">动态table</a></li>
                    <li><a href="jquery/jquery&css.html" target="min_show">jquery&css</a></li>
                    <li><a href="jquery/jquery动画.html" target="min_show">jquery动画</a></li>
                    <li><a href="jquery/品牌展示.html" target="min_show">品牌展示</a></li>
                    <li><a href="jquery/事件操作.html" target="min_show">事件操作</a></li>
                    <li><a href="jquery/事件绑定.html" target="min_show">事件绑定</a></li>
                    <li><a href="jquery/事件对象.html" target="min_show">事件对象</a></li>
                    <li><a href="jquery/图片跟随.html" target="min_show">图片跟随</a></li>
                </ul>
            </ul>
        </div>
        <!--右边主体-->
        <iframe src="html/main.html" frameborder="0" name="min_show"></iframe>
    </div>


    <script>
        let mode_list = document.getElementsByClassName("mode");
        for(var i = 0 ; i < mode_list.length ; i++){
            mode_list[i].onclick = function (e){
                let this_block = this.nextSibling.nextSibling.style.display;
                if(!this_block || this_block == 'none'){
                    this.nextSibling.nextSibling.style.display = "block";
                }else{
                    this.nextSibling.nextSibling.style.display = "none";
                }
            }
        }
    </script>

</body>
</html>